<template>
  <div>
    <el-upload :action="action" :file-list="fileList" :limit="1" :on-success="successFile" :on-error="errorFile"  :on-exceed="exceedFile" :on-remove="removeFile">
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
  </div>
</template>
<script>
import utils from '../ttJs/utils.js'
export default {
  name: 'uploadFile',
  data() {
    return {
      fileList: this.value
    };
  },
  props: {
    value: [Array],
    action: [String],
    index: [Number]
  },
  mounted() {},
  computed: {},
  watch: {},
  methods: {
    removeFile(file, fileList) {
      this.fileList = [];
      this.$emit('getFile', '', this.index);
    },
    successFile(response, file, fileList) {
      this.fileList = [];
      var f = {
        name: file.name,
        url: response.info
      };
      this.fileList.push(f);
      this.$emit('getFile', response.info, this.index);
    },
    errorFile(err, file, fileList) {
      utils.fail('上传文件失败')
    },
    exceedFile(files, fileList) {
      utils.fail('只能上传' + fileList.length + '个文件')
    }
  }
};

</script>
<style rel="stylesheet/scss" lang="scss">
input[type="file"] {
  display: none;
}

</style>
